<script setup>
import {onMounted, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import useRegister from "@/hooks/useRegister"
import {userLogin, userRegister} from "@/service/modules/user"
import { ElMessage } from 'element-plus'
// import {userLogin} from "@/api/user"


const _registerBtn = ref()
const _loginBtn = ref()
const router = useRouter()
const route = useRoute()

//登陆操作
//输入数据
const account=ref("")
const password=ref("")
function handleUserLogin() {
  /*this.$refs.formName.validate()登录验证函数，formName是form的ref属性,使用此方法前检查prop一定必须要写在<el-form-item>上面*/
  userLogin({account:account.value,password:password.value}).then((res) => {
        console.log(res)
        if (res.code === 200) {
          ElMessage({
            message: '登陆成功',
            type: 'success',
          })
          //当提交之后，将当前输入的用户名存储到localStorage中
          localStorage.setItem('username', account.value);
          router.push('/discover');
        } else {
          ElMessage.error('账号或者密码错误，请重新输入！')
          return false;
        }
      });
}

//注册操作
const registerAccount=ref("")
const registerPassword=ref("")
const registerPasswordConfirm=ref("")
function handleUserRegister() {
  if(registerPassword.value!==registerPasswordConfirm.value){
    ElMessage.error('两次输入密码不一致！')
    return false;
  }
  userRegister({account:registerAccount.value,password:registerPassword.value}).then((res) => {
    console.log(res)
    if (res.code === 200) {
      ElMessage({
        message: '注册成功',
        type: 'success',
      })
      router.push('/user/login');
    } else {
      ElMessage.error('账号已存在！')
      return false;
    }
  });
}

const wantRegister = ref()
// const props=defineProps({
//   wantRegiste:{
//     type:Boolean,
//     default:false
//   }
// })
function toLogin() {
  router.push("/user/login")
}

function toRegister() {
  useRegister()
}

onMounted(() => {
  const login = document.querySelector('.login')
  const register = document.querySelector('.register')
  const fogotPwd = document.querySelector('.fogot-pwd')
  const registerBtn = document.querySelector('.register-btn')
  const loginBtn = document.querySelector('.login-btn')
  const fogotPwdBtn = document.querySelector('.fogot-pwd-btn')
  const veriCodeTips = document.querySelector('.veri-code-tips');
  let reckonTimeFlag = 5; //倒计时
  let reckonTime; //定时器
//定时器
  function countDown() {
    veriCodeTips.innerHTML = `RESEND(${reckonTimeFlag})`
    reckonTimeFlag--;
    if (reckonTimeFlag < 0) {
      clearInterval(reckonTime);
      reckonTimeFlag = 5;
      veriCodeTips.innerHTML = `Click To Get`;
      veriCodeTips.style.color = "rgb(113 123 185)";
      veriCodeTips.onclick = veriCodeTipsClick;
    }
  }

//点击事件触发的方法
  function veriCodeTipsClick() {
    veriCodeTips.onclick = null;
    veriCodeTips.style.color = "rgb(153, 151, 151)";
    reckonTime = setInterval(countDown, 1000);
    countDown();
  }

  veriCodeTips.addEventListener('click', function () {
    veriCodeTipsClick()
  })
  registerBtn.addEventListener('click', function () {
    login.style.opacity = '0'
    fogotPwd.style.opacity = '0'
    register.style.opacity = '1'
    login.style.zIndex = '-1'
    fogotPwd.style.zIndex = '-1'
    register.style.zIndex = '10'
    register.style.animation = 'into 1s ease'
    login.style.animation = 'none'
    fogotPwd.style.animation = 'none'
    registerBtn.style.borderBottom = '4px solid rgb(249, 177, 122)'
    registerBtn.style.color = '#313131'
    loginBtn.style.borderBottom = 'none'
    loginBtn.style.color = 'rgb(100, 108, 154)'
  })
  loginBtn.addEventListener('click', function () {
    login.style.opacity = '1'
    register.style.opacity = '0'
    fogotPwd.style.opacity = '0'
    login.style.zIndex = '10'
    fogotPwd.style.zIndex = '-1'
    register.style.zIndex = '-1'
    login.style.animation = 'into 1s ease'
    register.style.animation = 'none'
    fogotPwd.style.animation = 'none'
    registerBtn.style.borderBottom = ''
    registerBtn.style.color = 'rgb(100, 108, 154)'
    loginBtn.style.borderBottom = '4px solid rgb(249, 177, 122)'
    loginBtn.style.color = '#313131'
  })
  fogotPwdBtn.addEventListener('click', function () {
    fogotPwd.style.opacity = '1'
    login.style.opacity = '0'
    register.style.opacity = '0'
    login.style.zIndex = '-1'
    fogotPwd.style.zIndex = '10'
    register.style.zIndex = '-1'
    fogotPwd.style.animation = 'into 1s ease'
    register.style.animation = 'none'
    login.style.animation = 'none'

  })
  // setInterval(()=>{
  //   console.log(route.query)
  // },1000)
  // if(route.query.wantRegister)
  //   _registerBtn.value.click()
  watch(() => route.query, (newValue, oldValue) => {
    if (newValue.wantRegister) {
      _registerBtn.value.click()
    } else {
      _loginBtn.value.click()
    }
  }, {
    immediate: true,
    deep: true
  })
})


</script>

<template>
  <div class="loginAndRegister">
    <div class="box">
      <div class="forms">
        <div class="tips">
          <span class="login-btn" ref="_loginBtn" @click="toLogin">登录</span>
          <span class="split-line">|</span><!--加-->
          <span class="register-btn" ref="_registerBtn" @click="toRegister">注册</span>
        </div>
        <div class="login">
          <div class="form-title">
            <h1>登录至</h1>
            <h4>海洋***系统</h4>
          </div>
          <div class="form">
            <div class="username input-item">
              <input type="text" v-model="account" class="ipts">
            </div>
            <div class="password input-item">
              <input type="password" v-model="password" class="ipts">
            </div>
            <div class="other-select">
              <div class="rem-pwd">
                <input type="checkbox" id="check">
                <label for="check" class="rem-pwd-tips">记住密码</label>
              </div>
              <span class="fogot-pwd-btn">忘记密码</span>
            </div>
            <button class="btn" @click="handleUserLogin">登入</button>
            <!--          <div class="other-login">-->
            <!--            <span>Other login methods</span>-->
            <!--            <div class="login-img">-->
            <!--              <img src="@/assets/img/QQ.png" alt="">-->
            <!--              <img src="@/assets/img/wechat-fill.png" alt="">-->
            <!--            </div>-->
            <!--          </div>-->
          </div>
        </div>
        <div class="register">
          <div class="form-title">
            <h1>注册至</h1>
            <h4>海洋****系统</h4>
          </div>
          <div class="form">
            <div class="username input-item">
              <input v-model="registerAccount" type="text" class="ipts">
            </div>
            <div class="password input-item">
              <input v-model="registerPassword" type="password" class="ipts">
            </div>
            <div class="conform-password input-item">
              <input v-model="registerPasswordConfirm" type="password" class="ipts">
            </div>
            <button class="btn" @click="handleUserRegister">注册</button>
          </div>
        </div>
        <div class="fogot-pwd">
          <div class="form-title">
            <h1>找回密码至</h1>
            <h4>海洋***系统</h4>
          </div>
          <div class="form">
            <div class="username input-item">
              <input type="text" class="ipts">
            </div>
            <div class="password input-item">
              <input type="password" class="ipts">
            </div>
            <div class="code input-item">
              <input type="text" class="ipts">
              <span class="veri-code-tips">找回密码</span>
            </div>
            <button class="btn">Confirm</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@font-face {
  font-family: NeueMachina-Regular;
  font-weight: 400;
  src: url(@/assets/font/NeueMachina-Regular.woff2) format("truetype");
}

* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
  background-color: rgb(36, 91, 220);
}

.loginAndRegister {
  height: 95vh;
  background-color: #f2f6f9;
}

.box {
  width: 70vw;
  height: 70vh;
  background: url(@/assets/img/bg.jpg);
  background-attachment: fixed;
  background-size: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 30px;
  font-family: NeueMachina-Regular;
  overflow: hidden;

  .forms {
    width: 50%;
    height: 100%;
    background-color: #ebeef3;
    border-radius: 30px 0 0 30px;
    color: #313131;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    position: relative;

    .tips {
      width: 70%;
      height: 10%;
      box-sizing: border-box;
      font-size: 25px;
      margin: 4vh;

      span {
        margin: 0 10px 0 0;
        cursor: pointer;
        padding-bottom: 5px;
        transition: 0.1s;
        color: #d2dfed;

        &:hover {
          border-bottom: 4px solid rgb(249, 177, 122);
          color: #fff;
        }
      }

      .login-btn {
        border-bottom: 4px solid rgb(249, 177, 122);
        color: #fff;
      }
    }

    .login,
    .register,
    .fogot-pwd {
      width: 70%;
      top: 20%;

      .form-title {
        h1 {
          margin-bottom: 10px;
        }
      }

      .form {
        margin-top: 3vw;

        .username {
          &::before {
            content: "用户名";
          }
        }

        .password {
          &::before {
            content: "密码";
          }
        }

        .conform-password {
          &::before {
            content: "确认密码";
          }
        }

        .code {
          position: relative;

          &::before {
            content: "Code";
          }

          .veri-code-tips {
            position: absolute;
            right: 20px;
            top: 36px;
            color: #313131;
            cursor: pointer;
          }
        }

        .input-item {
          width: 100%;
          height: 70px;
          margin: 10px 0;
          transition: 0.5s;

          &::before {
            display: block;
            position: absolute;
            color: #313131;
            padding: 10px 5px 1px 20px;
            font-size: 14px;
          }

          input {
            width: 100%;
            height: 100%;
            background-color: #e8f0fe;
            outline: none;
            border: 0;
            padding: 20px 5px 1px 20px;
            box-sizing: border-box;
            color: #313131;
            font-size: 20px;

            &:focus {
              border-left: 3px solid #394d6d;
            }
          }
        }

        .other-select {
          display: flex;
          justify-content: space-between;
          color: #313131;
          margin-top: 1vw;

          #check:checked + .rem-pwd-tips {
            //color: #fff;
          }

          input[type="checkbox"] {
            width: 20px;
            height: 20px;
            margin-right: 10px;
            position: relative;
            border: 0;
          }

          input[type="checkbox"]::after {
            position: absolute;
            top: 0;
            color: #d2dfed;
            width: 20px;
            height: 20px;
            display: inline-block;
            visibility: visible;
            padding-left: 0;
            text-align: center;
            background-color: #d2dfed;
            content: " ";
          }

          input[type="checkbox"]:checked::after {
            content: "✓";
            color: #313131;
            font-size: 30px;
            line-height: 20px;
            background-color: #e8f0fe;
            //border: 5px solid #e8f0fe;
            //border-radius: 5px;
          }

          .rem-pwd {
            .rem-pwd-tips {
              cursor: pointer;
            }
          }

          .fogot-pwd-btn {
            cursor: pointer;
            color: #313131;
          }
        }

        .btn {
          width: 40%;
          height: 50px;
          cursor: pointer;
          border: 0;
          background-color: rgb(249, 177, 122);
          color: #313131;
          margin: 10px 0;
          border-radius: 5px;
          font-size: 20px;
          box-shadow: 0px 0px 10px rgb(249, 177, 122);
          transition: 0.3s;
          margin-top: 3vw;
          font-family: NeueMachina-Regular;

          &:hover {
            box-shadow: 0px 0px 15px rgb(249, 177, 122);
          }
        }

        .other-login {
          color: rgb(100, 108, 154);
          margin-top: 5vw;
          font-weight: 900;
          display: flex;
          align-items: baseline;

          .login-img {
            img {
              width: 40px;
              height: 40px;
              vertical-align: middle;
              margin-left: 10px;
              border-radius: 5px;
              cursor: pointer;
              vertical-align: middle;
            }
          }

          span {
            display: inline-block;
            margin-right: 2vw;
          }
        }
      }
    }

    .login {
      position: absolute;
      opacity: 1;
      z-index: 10;
      animation: into 1s ease;
    }

    .register {
      position: absolute;
      opacity: 0;
      z-index: -1;
    }

    .fogot-pwd {
      position: absolute;
      opacity: 0;
      z-index: -1;
    }
  }
}

/*加*/
.split-line {
  display: none; /**/
}

@media (max-width: 1024px) {
  .box {
    width: 100vw;
    height: 100vh;
    border-radius: 0;

    .forms {
      width: 100%;
      border-radius: 0;

      .other-select {
        justify-content: flex-end !important;

        .rem-pwd {
          display: none;
        }
      }

      .other-login {
        flex-direction: column;
        position: relative;
        justify-content: center;

        .login-img {
          position: absolute;
          right: 0;
          top: 5vh;
        }
      }
    }
  }
}

@keyframes into {
  0% {
    transform: translateY(5vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@media screen and (max-width: 2000px) and (min-width: 1024px) {
  .split-line {
    display: inline; /**/
    /*color:black*/
    color: #d2dfed; /*灰*/
    font-weight: bolder;
    padding: 0 10px 0 10px;
  }

  .box {
    width: 78vw;
    height: 78vh;
    top: 55%; /*原50*/

    .forms {
      .tips {
        span {
          margin: 0 1px 0 0; /*原0 10px 0 0，在360安全浏览器设置无效*/
        }
      }

      .login,
      .register,
      .fogot-pwd {
        .form {
          .input-item {
            height: 40px; /*原70*/

            &::before {
              padding: 4px 5px 1px 20px; /*原10px 5px 1px 20px*/
            }
          }

          .btn {
            height: 30px; /*原50*/
          }
        }
      }

    }
  }

}
</style>

<!--2024/2/2 18:15-->